<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <video id="video" width="765" height="430" controls  src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
        <div class="speed">
            <div class="speed-bar">
                1x
            </div>
        </div>
    </div>


    <script>
        // 随着彩色容器高度的变化,控制视频播放速度
        // 鼠标在白色容器上滑动, 带来彩色容器的高度变化
        // 在白色容器上监听到鼠标的移动

        const speed = document.querySelector('.speed')
        const speed_bar = document.querySelector('.speed-bar')
        const video = document.getElementById('video')
        speed.addEventListener('mousemove', (e)=>{
            // 鼠标的高度需要减去容器的高度得到滑块的高度
            // offsetTop获取容器顶部的高度  offsetHeight获取容器的高度
            const y = e.pageY - speed.offsetTop
            const percent = y / speed.offsetHeight
            const height = Math.round(percent*100)+'%'

            // 通过设置最大值最小值和百分比计算播放速度
            const min = 0.4
            const max = 4
            speed_bar.style.height = height
            const playbackRate = (max - min)*percent + min
            // toFixed(2)保存两位小数
            speed_bar.textContent = playbackRate.toFixed(2)+'x'
            // 获取video的播放速度属性playbackRate    
            video.playbackRate = playbackRate
        })


    </script>
</body>
</html>